<template>
  <div>
    <el-form label-width="auto" size="mini" :inline="true">
      <el-form-item label="停机维护信息查询类型：">
        <el-select
          v-model="selectedQueryType"
          placeholder="请选择"
          clearable
          class="filter-item"
          style="width: 150px"
        >
          <el-option
            v-for="(desc, value) in queryTpCdStatus"
            :key="value"
            :label="desc"
            :value="value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="银联单号：" class="numitem">
        <el-input
          v-model="listQuery.oriTrxId"
          placeholder="请选择"
          :disabled="selectedQueryType === '02'"
        ></el-input>
      </el-form-item>

      <el-form-item label="停机计划时间段：" class="timerange">
        <el-date-picker
          @change="changeValue"
          v-model="valuePicker"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '00:00:00']"
          :disabled="selectedQueryType === '01'"
          :picker-options="pickerOptions"
          align="right"
          unlink-panels
          
        >
        </el-date-picker>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryTpCdStatus: {
        "01": "运维信息编号查询",
        "02": "计划时间查询",
      },
      selectedQueryType: "",
      timeDate: [],
      listQuery: {
        pn: 1,
        ps: 10,
        oriTrxId: "",
        queryTp: "",
        startTm: "",
        endTm: "",
      },
      minDate: "",
      maxDate: "",
      valuePicker: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate;
          this.maxDate = maxDate;
        },
        disabledDate: (time) => {
          if (this.minDate) {
            const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
            const diff = Math.abs(time.getTime() - this.minDate.getTime());

            return diff > oneDay || time.getTime() > new Date().getTime(); // 大于一天的日期禁用，以及大于当前时间的日期禁用
          }
          return time.getTime() > new Date().getTime(); // 没有选择开始日期时禁用大于当前时间的日期
        },
         
      },
    };
  },
  methods: {
    handleSearch() {
      // 构建传给后端的参数
      this.listQuery.queryTp = this.selectedQueryType;
      const queryParams = {
        ...this.listQuery, // 包含你的查询参数
        // 其他可能的参数
      };

      // 输出参数到控制台
      console.log("传给后端的参数：", queryParams);

      // 在这里可以执行实际的后端请求，使用queryParams作为参数
      // 然后处理后端返回的数据
    },

    changeValue(val) {
      if (val && val.length === 2) {
        this.listQuery.startTm = val[0];
        this.listQuery.endTm = val[1];
      } else {
        this.listQuery.startTm = "";
        this.listQuery.endTm = "";
      }
      console.log(val);
      if (val === null) {
        this.valuePicker = "";
        this.minDate = "";
        this.maxDate = "";
      }
    },
    // 其他方法...
  },
   watch: {
    selectedQueryType(newVal) {
      if (newVal === '01' || newVal === '02') {
        // 清空对应的数据字段
        this.listQuery.oriTrxId = '';
        this.listQuery.startTm = '';
        this.listQuery.endTm = '';
        this.valuePicker = '';
        this.minDate = '';
        this.maxDate = '';
      }
    },
  },
};
</script>

<style scoped>
/* 可以在这里定义组件的样式 */
</style>
